<template>
  <div id="app">
    <div class="article-box">
      <div class="write" @click="towrite">
        <i class="el-icon-edit"></i>写文章
      </div>
      <transition-group name="el-zoom-in-center">
        <div class="article" v-for="(item, index) in list" :key="index">
          <div class="article-content">
            <div class="title">
              <p class="title-text">
                <!-- <span class="tag1">【原创】</span> -->
                <el-avatar size="large" :src="'http://www.liujn.top/bbs/api' + item.avatar" v-if="show" class="tag1"></el-avatar>
                <router-link :to="'articledetail/' + item.id" class="title-title"><span>{{
                  item.title
                }}</span></router-link>
              </p>
            </div>
            <el-row class="middle">
              <el-col :span="8" class="middle-pic">
                <router-link :to="'articledetail/' + item.id"
                  ><el-image
                    :src="'http://www.liujn.top/bbs/api' + (item.image || '/image/fatie/diushi.jpg')"
                    fit="cover"
                    class="pic"
                    lazy
                  >
                  <div slot="placeholder" class="image-slot">
                  <p>加载中...</p>
                  </div>
                  </el-image
                ></router-link>
              </el-col>

              <el-col :span="16" class="middle-text">
                <p>{{ item.text }}</p>
              </el-col>
            </el-row>

            <div class="footer">
              <div class="line-content">
                <p class="footer-text">文章详情</p>
                <div class="line"></div>
              </div>
              <div class="tag2-content">
                <div class="tag2-content-left">
                  <p class="tag2-text">{{ item.username }}</p>
                  <p class="tag2-text">{{ changeTime(item.posttime) }}</p>
                </div>
                <div class="tag2-content-right">
                  <i
                    class="el-icon-chat-dot-square"
                    style="margin-left: 30px"
                  ></i>
                  <span style="margin-left: 5px">{{ item.reply2s.length }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "articles",
  data() {
    return {
      list: [
        // {
        //   view: 412,
        //   comment: 44,
        //   title: "派大星：医生为我开了副这个，我还有救吗？",
        //   tag: "原创",
        //   img: require("../../assets/img1.jpg"),
        //   text: "每个人表面上都想改变自己，但内心却都抗拒改变，这是人性的懒惰和矛盾"
        // }, {
        //   view: 1112,
        //   comment: 124,
        //   title: "LOL新版本最强BOSS！挡不住的钢之炼金术师 【有点骚东西】",
        //   tag: "原创",
        //   img: require("../../assets/img2.jpg"),
        //   text: "上单炼金25层药水出门，打野男枪一枪一个野怪，中单冰女推推棒瞬间满血，ad女枪半圆扫射，辅助锤石25层真眼一看对面上单奥恩无限回血，打野剑圣无限金币6神出门中单塞拉斯秒杀水晶ad卢仙无限狂风之力,辅助佐伊无限w,我们都有光明的未来😁"
        // }, {
        //   view: 412,
        //   comment: 44,
        //   title: "派大星：医生为我开了副这个，我还有救吗？",
        //   tag: "原创",
        //   img: require("../../assets/img1.jpg"),
        //   text: "每个人表面上都想改变自己，但内心却都抗拒改变，这是人性的懒惰和矛盾"
        // }, {
        //   view: 1112,
        //   comment: 124,
        //   title: "LOL新版本最强BOSS！挡不住的钢之炼金术师 【有点骚东西】",
        //   tag: "原创",
        //   img: require("../../assets/img2.jpg"),
        //   text: "上单炼金25层药水出门，打野男枪一枪一个野怪，中单冰女推推棒瞬间满血，ad女枪半圆扫射，辅助锤石25层真眼一看对面上单奥恩无限回血，打野剑圣无限金币6神出门中单塞拉斯秒杀水晶ad卢仙无限狂风之力,辅助佐伊无限w,我们都有光明的未来😁"
        // }
      ],
      show: false
    };
  },
  mounted() {
    this.getArticle();
  },
  methods: {

    // 获取数据，按照 avtivetime(最后活跃时间) 属性进行排序
    getArticle() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      });
      this.axios.get("http://www.liujn.top/bbs/api/Allposts/seek").then((res) => {
        loading.close();
        let list = res.data;
        for(let i = 0, len = list.length; i < len; i++) {
          list[i].activetime = new Date(list[i].activetime)
        }
        const handle = (property) => {
          return (a, b) => {
            const val1 = a[property];
            const val2 = b[property];
            return val1 - val2;
          };
        };
        list.sort(handle("activetime"));
        // console.log(list.reverse());
        this.list = list.reverse();
        this.show = true
      });
    },

    // 有没有登录
    towrite() {
      if (this.$cookies.isKey("CookieId")) {
        this.$router.push("/writearticle");
      } else {
        this.$message.error("请先登录哈~");
      }
    },

    // 转换时间 UTC
    changeTime(time) {
      return new Date(+new Date(time) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
  },
};
</script>

<style scoped>
#app {
  /* min-height: 100vh; */
}

.title-title {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.write {
  height: 50px;
  background-color: #fff;
  width: 90%;
  margin: 20px auto 20px auto;
  color: #222222;
  line-height: 50px;
  cursor: pointer;
}

.article-box {
  margin-top: 60px;
  padding-top: 10px;
  width: 100%;
}
.article {
  margin: 20px auto 20px auto;
  background-color: #fff;
  width: 90%;
  height: 290px;
  display: flex;
}

.article-content {
  height: 290px;
  width: 93%;
  margin: 0 auto;
  align-self: center;
}

.tag1 {
  color: #4fbdeb;
  min-width: 40px;
  height: 40px;
  margin-right: 10px;
}

.title-text {
  font-weight: 600;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  line-height: 50px;
  height: 40px;
  margin: 0 auto;
  border-bottom: 1px solid #eeeeee;
}

.middle {
  height: 180px;
}

.middle-pic {
  display: flex;
  height: 100%;
  width: 30%;
}

.middle-text {
  height: 100%;
  padding: 0 20px;
  text-align: justify;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  line-height: 28px;
}

.footer-text {
  font-size: 14px;
  font-weight: bold;
  align-self: center;
}

.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 40px;
  margin: 0 auto;
}

.line-content {
  height: 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* background-color: #bbb; */
}

.line {
  align-self: center;
  width: 82%;
  height: 1px;
  background-color: #eee;
}

.pic {
  margin-top: 18px;
  width: 100%;
  min-width: 100px;
  height: 150px;
  align-self: center;
  border: 1px solid #f5f7fa;
}

.image-slot {
  line-height: 150px;
  margin: 0px auto;
  width: 100%;
  color: #777;
  font-size: 14px;
}

.tag2-content {
  margin: 5px 0;
  width: 100%;
  height: 20px;
  text-align: left;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}

.tag2-content-left {
  /* width: 30%; */
  display: flex;
}

.tag2-content-right {
  display: flex;
}

.tag2-content-right span {
  font-size: 14px;
  align-self: center;
}

.tag2-text {
  align-self: center;
  padding: 0 5px;
  font-size: 12px;
  margin-right: 10px;
  background-color: #eee;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
}

a:link {
  text-decoration: none;
  color: #222222;
}
a:visited {
  text-decoration: none;
  color: #222222;
}
a:hover {
  text-decoration: none;
  color: #222222;
}
a:active {
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #222222;
}



</style>
